<template>
	<view>
		<template v-if="sercheList.length === 0">
			<!-- 搜索列表 -->
			<view class="font-lg font-weight-bold mx-2">
				搜索历史
			</view>
			<view class="flex flex-wrap">
				<view class="border p-1 mx-2 my-1 rounded box-shadow " v-for="(i,index) in words" :key="index"
					hover-class="bg-light" @click="searchHistory(i)">
					{{i}}
				</view>
			</view>
		</template>
		<!-- 数据列表 -->
		<template v-else>
			<block v-for="(item,index) in sercheList " :key="index">
				<common-list :item="item" :index="index" @fllow="follow" @doSupport="doSupport"></common-list>
				<!-- 背景线 -->
				<divider></divider>
			</block>
		</template>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue'

	const demo = [{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '', //封面
			//点赞和踩
			support: {
				type: 'support', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 0, //评论
			share_num: 0 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: 'unsupport', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: '', //未操作
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		}
	]
	export default {
		components: {
			commonList
		},
		data() {
			return {
				serchText: '', //监听搜索事件
				words: ['实战项目一>慕英的裙装商城', 'uniapp', 'vue', 'java基础', '风景这边独好'],
				sercheList: [] //搜索列表
			}
		},
		//监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			this.serchText = e.text;
		},
		//监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarButtonTap(e) {
			console.log(e.index);
			if (e.index === 0) {
				this.searchEvent()
			}
		},
		methods: {
			//点击搜索
			searchHistory(text){
				this.serchText = text
				this.searchEvent()
			},
			//搜索事件
			searchEvent(){
				//收起键盘
				uni.hideKeyboard()
				//处于加载状态
				uni.showLoading({
					title:'加载中',
					mask:true //显示透明蒙版
				})
				//请求搜索
				setTimeout(() => {
					this.sercheList = demo
					//隐藏加载中
					uni.hideLoading()
				},2000)
			}
		}
	}
</script>

<style>

</style>
